import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: new AppBar(
          title: Text("gridview"),
        ),
        body:
//        NormalGridView(),
      GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            // 一行多少个
            crossAxisCount: 3,
            // 上下间隔
            mainAxisSpacing: 10,
            // 左右间隔
            crossAxisSpacing: 10
          ),
          itemBuilder: (context, index){
            return Container(
//              margin: EdgeInsets.all(10),
              color: Colors.red,
              child: Text(
                '$index',
                style: TextStyle(fontSize: 20),
              ),
            );
          })
      ),
    );
  }
}

class NormalGridView extends StatelessWidget {
  const NormalGridView({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      // 一行多少个
      mainAxisSpacing: 10,
      // 上下间隔
      crossAxisSpacing: 10,
      // 左右间隔
      scrollDirection: Axis.vertical,
      childAspectRatio: 6 / 5,
      // 宽高比，默认1.0
      children: List.generate(100, (index) {
        return Container(
//              margin: EdgeInsets.all(10),
          color: Colors.red,
          child: Text(
            '$index',
            style: TextStyle(fontSize: 20),
          ),
        );
      }),
    );
  }
}
